<style>
    .increase {
        padding: 0 30px;
    }

    .formInline .ivu-input-group-prepend .ivu-select-selection,
    .formInline .ivu-input-group-append .ivu-select-selection {
        background-color: #fff !important;
    }

    .increase .ivu-select-multiple .ivu-select-selection {
        overflow: hidden !important;
    }
</style>
<style scoped>
    /* .formInline {
        background-color: #CECECE !important;
    } */

    /* .formInline .common-box-body .ivu-form-item label {
        border: none !important;
    } */
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="increase ">
            <div>
                <h3 class="search-h3 huang">育成奖设置</h3>
            </div>

            <div style="color:red;margin-bottom:15px;">计算公式:
                <span style="color:blue;">育成奖是指各级主管按每个育成组月度价值保费达标数享有的业绩奖金</span>
            </div>

            <div class="common-box-body">
                <Form :model="increase" ref="increase" :rules="ruleValiPrize">
                    <Row>
                        <Col :md="24" :lg="6">
                        <FormItem label="名称设置 :" prop="name">
                            <Input v-model="increase.name" size="large" type="text" placeholder="名称设置" />
                        </FormItem>
                        </Col>
                        <Col :md="24" :lg="6">
                        <FormItem label="适用对象 :" class="search" prop="rankIds">
                            <Select v-model="increase.rankIds" multiple filterable placeholder="选择适用对象" :transfer=true>
                                <Option v-for="(option, index) in comoptions" :value="option.id" :key="index">{{option.name}}</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col :md="24" :lg="6">
                        <FormItem label="发放周期 :" prop="configValue.assessmentCycleType">
                            <Select v-model="increase.configValue.assessmentCycleType">
                                <Option value="4">月</Option>
                                <Option value="3">季</Option>
                                <Option value="2">半年</Option>
                                <Option value="1">年</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col :md="24" :lg="6">
                        <FormItem prop="enabled">
                            <RadioGroup v-model="increase.enabled">
                                是否启用 :
                                <Radio label="1" class="ml15">是</Radio>
                                <Radio label="0">否</Radio>
                            </RadioGroup>
                        </FormItem>
                        </Col>

                        <Col style="text-align:right" :md="24" :lg="24" class="mb10">
                        <Button type="success" icon="plus" class="fr" size="large" @click="zhijiadd">新增</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
            <Row>
                <div class="table-theme highlight_table">
                    <Table :columns="column" :data="tableList" size="large" stripe highlight-row border></Table>
                </div>
            </Row>
            <div id="footer" style="padding:0 30px;">
                <Button type="primary" shape="circle" id="submit" :disabled="tableaction" @click="create" style="border-radius: 30px !important;margin-top:25px;">
                    <Icon type="checkmark-circled"></Icon>
                    保存 / 提交
                </Button>
                <Button id="back" @click="$router.back(-1)" shape="circle" style="border-radius: 30px !important;background:#77B4F5;color:white;font-size:14px;margin-top:25px;">返回</Button>
            </div>
        </div>
        <Modal v-model="zhiji" title="育成奖设置" :mask-closable="false" :closable="false" class-name="common-box-body formInline">
            <Form ref="formInline" :model="formInline" class="" :rules="ruleValiFormInline">
                <Row>
                    <Col span="6">
                    <div style="font-size:14px;height:36px;line-height:36px;text-align:center;">价值保费(元) :</div>
                    </Col>
                    <Col span="18">
                    <FormItem prop="hight">
                        <Input v-model="formInline.hight">
                        <Select slot="prepend" style="width: 120px" v-model="fycOver">
                            <Option value="<">最大值</Option>
                        </Select>
                        </Input>
                    </FormItem>
                    <FormItem prop="low">
                        <Input v-model="formInline.low">
                        <Select slot="prepend" style="width: 120px" v-model="fycLow">
                            <Option value="≤">最小值</Option>
                        </Select>
                        </Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col>
                    <Col span="6">
                    <div style="font-size:14px;height:36px;line-height:36px;text-align:center;">对应奖金率 :</div>
                    </Col>
                    <Col span="18">
                    <FormItem prop="value">
                        <Input v-model="formInline.value" placeholder="对应奖金率"></Input>
                    </FormItem>
                    </Col>
                    </Col>
                </Row>
            </Form>
            <div slot="footer" :md="24" :lg="8">
                <Button style="width:60px;" type="primary" size="small" @click="cance">取消</Button>
                <Button style="width:60px;" class="tRight" type="success" size="small" long @click="add">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        get_all_rule,
        get_add_rule,
        get_rule_list,
        del_rule,
        get_rank
    } from '../../api/rule'
    import {
        parteGetByName
    } from '../../api/parter'
    import util from '../../libs/util.js';
    export default {
        data() {
            return {
                fycValue1: '<',
                tableaction: false,
                closeable: false, //shif按ese按钮退出
                comoptions: [],
                increase: {
                    tempalteId: this.$route.params.tempalteId,
                    name: '',
                    rankIds: [],
                    enabled: '1',
                    configValue: {
                        assessmentCycleType: '',
                        em:'',
                        list: [],
                        ruleName: '育成奖',
                    },
                },
                disabled: true,
                zhiji: false,
                column: [{
                        type: 'index',
                        title: '序号',
                        align: 'center',
                        width: '80'
                    },
                    {
                        title: '育成组月度价值保费(元)',
                        key: 'groupUpLowValue',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', params.row.low + '≤FYP<' + params.row.hight)
                        }
                    },
                    {
                        title: '对应奖金率',
                        key: 'value',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: '80',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'large'
                                    },
                                    style: {
                                        padding: '3px',
                                        width: '60px',
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ])
                        }
                    },
                ],
                tableList: [],
                fycOver: "<",
                fycLow: "≤",
                formInline: {
                    "hight": '',
                    "low": '',
                    "value": '',
                },
                ruleValiPrize: {
                    name: [{
                        required: true,
                        message: '名称不能为空',
                        trigger: 'change'
                    }],
                    'configValue.fycValue': [{
                        required: true,
                        message: '请输入正确数字',
                        trigger: 'change',
                        pattern: /^[0-9]+$/,
                    }],
                    'configValue.em': [{
                        required: true,
                        message: '请输入正确数字',
                        trigger: 'change',
                        pattern: /^[0-9]+$/,
                    }],
                    rankIds: [{
                        required: true,
                        message: '请选择一个适用对象',
                    }],
                    'configValue.assessmentCycleType': [{
                        required: true,
                        message: '请选择发放周期',
                        trigger: 'blur,change'
                    }],
                    enabled: [{
                        required: true,
                        message: '请选择是否启用',
                        trigger: 'blur,change'
                    }],
                },
                ruleValiFormInline: {
                    hight: [{
                            required: true,
                            message: '不能为空',
                            trigger: 'blur,change'
                        },
                        {
                            required: true,
                            pattern: /^[z0-9*]*$/,
                            message: '只能输入数字',
                            trigger: 'blur,change'
                        }
                    ],
                    low: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur,change'
                    }, {
                        required: true,
                        pattern: /^[z0-9*]*$/,
                        message: '只能输入数字',
                        trigger: 'blur,change'
                    }],
                    value: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }, {
                        required: true,
                        pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                        message: '只能输入数字',
                        trigger: 'blur'
                    }],

                },
            }
        },
        components: {
            productTitle
        },
        created() {
            this.cominit();
            if (this.$route.params.id) {
                var _this = this;
                var url =
                    BASE_URL1 + "/kb/v1/rule/salary/config/" + this.$route.params.id;
                util.ajax
                    .get(url, {})
                    .then(function (res) {
                        if (res.data.err == 0) {
                            _this.increase.id = res.data.data.id;
                            _this.increase.name = res.data.data.name;
                            _this.increase.rankIds = res.data.data.rankSet;
                            _this.increase.enabled = res.data.data.enabled ? "1" : "0";
                            _this.increase.configValue.assessmentCycleType = JSON.parse(
                                res.data.data.configValue
                            ).assessmentCycleType;

                            _this.increase.configValue.fycValue = JSON.parse(
                                res.data.data.configValue
                            ).fycValue;

                            _this.increase.configValue.em = JSON.parse(
                                res.data.data.configValue
                            ).em;
                            _this.increase.configValue.list = JSON.parse(
                                res.data.data.configValue
                            ).list;
                            _this.increase.configValue.ruleName = JSON.parse(
                                res.data.data.configValue
                            ).ruleName;
                            _this.tableList = _this.increase.configValue.list;
                        }
                    })
                    .catch(res => {});
            }
        },
        methods: {
            cominit() {
                new Promise((resolve, reject) => {
                    // get_rank().then(response => {
                    get_rank().then(response => {
                        if (response.data.err == 0) {
                            this.comoptions = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            zhijiadd() {
                this.zhiji = true;
            },
            add() {
                this.$refs['formInline'].validate((valid) => {
                    if (valid) {
                        if (parseInt(this.formInline.hight) <= parseInt(this.formInline.low)) {
                            this.formInline.hight = '';
                            this.formInline.low = "";
                            this.$Message.error('FYC最大值必须大于最小值且不能为空')
                            return false;
                        }
                        var _this = this;
                        _this.tableList = [];
                        _this.increase.configValue.list.push(JSON.parse(JSON.stringify(_this.formInline)));
                        _this.tableList = [].concat(JSON.parse(JSON.stringify(_this.increase.configValue.list)));
                        for (var i in _this.tableList) {
                            if (_this.tableList[i].hight && _this.tableList[i].low) {
                                _this.tableList[i].fyc = _this.tableList[i].low + "≤年<" + _this.tableList[
                                    i].hight;
                            }
                            if (!_this.tableList[i].hight && _this.tableList[i].low) {
                                _this.tableList[i].fyc = _this.tableList[i].low + "≤年";
                            }
                            if (_this.tableList[i].hight && !_this.tableList[i].low) {
                                _this.tableList[i].fyc = "年<" + _this.tableList[i].hight;
                            }
                        }
                        _this.tableList = _this.tableList;
                        _this.$refs['formInline'].resetFields();
                        _this.zhiji = false;
                    }
                })
            },
            cance() {
                this.$refs['formInline'].resetFields();
                this.zhiji = false;
            },
            create() {
                this.$refs['increase'].validate((valid) => {
                    if (valid) {
                        var _this = this;
                        let form = Object.assign({}, this.increase);
                        form.configValue = JSON.stringify(form.configValue);
                        form.rankIds = form.rankIds.join();
                        if (this.$route.params.id) {
                            let url =
                                BASE_URL1 + "/kb/v1/rule/salary/config/" + form.id;
                            util.ajax.post(url, form).then(res => {
                                if (res.data.err == 0) {
                                    _this.$Message.success("操作成功");
                                    _this.$router.push({
                                        name: "rulelist2"
                                    });
                                } else {
                                    _this.$Message.error("操作失败");
                                }
                            });
                        } else {
                            new Promise((resolve, reject) => {
                                get_add_rule(form).then(response => {
                                    if (response.data.err == 0) {
                                        _this.$router.push({
                                            name: 'rulelist2'
                                        });
                                    } else {
                                        _this.$Message.error('操作失败');
                                    }
                                    resolve();
                                }).catch(error => {
                                    reject(error);
                                });
                            });
                        }
                    }
                })
            },
            // 点击删除
            remove(index) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.tableList.splice(index, 1);
                        this.increase.configValue.list.splice(index, 1);
                    },
                });
            },
        }

    }
</script>